<template>
    <div class="container-xl">
        <div class="row row1">
            <div class="col col1">创建比赛</div>
        </div>
        <div class="row">
            <div class="col">
                <createdactivityVue v-bind="{ teamid, ID, isAdmin: false }"
                    :createdorupdateactivtiy="createdorupdateactivtiy" :delactivity="asyncteamdelactivity"
                    :routers="{ name: '团队比赛' }"></createdactivityVue>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import createdactivityVue from '../../../components/activity/createdactivity.vue';
import { asyncteamcreateorupdateactivity, asyncteamdelactivity, asyncteamchangematchquestion } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
const p = defineProps<{ ID: number }>()
const router = useRouter()
const route = useRoute()
const teamid = computed(() => {
    return Number(route.params.ID)
})

async function createdorupdateactivtiy(data: {
    data: Studycodemodel.Iactivity;
    question: Studycodemodel.Imatchquestion[];
    teamid?: number | undefined;
    users: Studycodemodel.Iuser[]
}) {
    const t = await asyncteamcreateorupdateactivity(data)
    return t
}


const ID = computed(() => {
    return Number(route.query.ID)
})

watch(() => ID.value, (v) => {
    if (v) {
        start()
    }
})

onMounted(() => {
    start()
})

function start() {

}

</script>

<style scoped>
.container-xl {
    background-color: #fff;
    margin-top: 24px;
}

.row1 {
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-43);
}

.col1 {
    padding-left: 20px;
}
</style>
